<template>
  <footer class="footer">
    <div class="footer-content">
      <div class="footer-section logo-section">
        <div style="display: flex;">
        <img src="@/assets/logo.png" alt="网站Logo" class="logo" />
        <div style="margin-left: 30px;">
          <h2 class="site-name">智慧校园</h2>
          <p class="slogan">Smart Campus</p>
        </div>
        </div>
        <div style="font-size: 12px;">
        &copy; 2023-2024 Your Company Name. All Rights Reserved.
        </div>
      </div>
      <div class="self">
      <div class="footer-section about">
        <h3>关于我们</h3>
        <div style="display: flex; width: 170px;">
        <ul>
          <li><router-link to="/">关于我们</router-link></li>
          <li><router-link to="/qa">常见问题</router-link></li>
        </ul>
        <ul>
          <li><router-link to="/course-introduction">学校云</router-link></li>
          <li><router-link to="/legal">法律条款</router-link></li>
        </ul>
      </div>
      </div>
      <div class="footer-section contact">
        <h3>联系我们</h3>
        <ul>
          <img style="width: 40px; margin-right: 10px;" src="@/assets/picture/icon_QQ.png" alt="QQ" />
          <img style="width: 40px;" src="@/assets/picture/icon-wechat.png" alt="微信" />
        </ul>
      </div>
      <div class="footer-section qr-section">
        <h3>友情链接</h3>
        <ul>
          <li><router-link to="/smart-course">智慧课堂</router-link></li>
        </ul>
      </div>
      <div class="footer-section">
        <img style="margin-top: 20px;" src="@/assets//picture/code.png" alt="二维码" class="qr-code" />
        <p style="font-size: 12px;">扫描二维码 <br>关注公众号</p>
      </div>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  name: 'AppFooter',
};
</script>

<style scoped>
.footer {
  background-color: #081831;
  color: #CACCC7;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  
}
.self{
  display: flex;
}
.footer-content {
  display: flex;
  justify-content: space-between;
  width: 80%;
  max-width: 1200px;
  flex-wrap: wrap;
  height: 20vh;
  align-items: center;
  align-content: center;
}

.footer-section {
  flex: 1;
  margin: 10px;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.logo {
  max-width: 130px;
}

.site-name {
  font-size: 1.5rem;
  margin: 10px 0 5px;
}

.slogan {
  font-size: 1rem;
  color: #1abc9c;
}

.footer-section h3 {
  border-bottom: 2px solid #1abc9c;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section ul li {
  margin: 10px;
}

.footer-section ul li a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-section ul li a:hover {
  color: #1abc9c;
}

.qr-code {
  max-width: 80px;
}

</style>
